<template>
  <!-- 资讯评论审核 -->
  <div>
    <!-- header -->
    <div id="header">
      <el-button type="primary" @click="addTalk">添加</el-button>
      <!-- 批量删除 -->
      <el-button type="danger" style="margin-left:30px;" plain @click="moreDelete()">批量删除</el-button>
    </div>
    <!-- content内容 -->
    <div id="content">
      <el-table
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        :header-cell-style="{ background: '#eef1f6', color: 'blue' }"
        style="width: 100%; margin-top: 20px"
        :row-key="getRowKeys"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
        @current-change="toggleRowExpansion"
      >
        <el-table-column
          type="selection"
          width="30"
        />
        <el-table-column type="expand" prop="baseUser">
          <!-- scope.row.baseUser对象属性变成数组列表[scope.row.baseUser] -->
          <template slot-scope="scope">
            <el-table
              :data="[scope.row.baseUser]"
              style="width: 100%"
              :header-cell-style="{ background: '#eef1f6', color: 'green' }"
            >
              <!-- 序号 -->
              <el-table-column
                type="index"
                label="序号"
                align="center"
              />
              <!-- 登录者 -->
              <el-table-column
                prop="username"
                label="登录者"
                align="center"
              />
              <!-- 密码 -->
              <el-table-column
                prop="password"
                label="密码"
                align="center"
              />
              <!-- 电话 -->
              <el-table-column
                prop="telephone"
                label="电话"
                align="center"
              />
              <!-- 姓名 -->
              <el-table-column
                prop="realname"
                label="姓名"
                align="center"
              />
              <!-- 图片 -->
              <el-table-column label="图片" align="center">
                <!-- 作用域插槽 -->
                <template slot-scope="scope">
                  <el-image
                    style="width: 40px; height: 40px"
                    :src="scope.row.userFace"
                    :preview-src-list="[scope.row.userFace]"
                  />
                </template>
              </el-table-column>
              <!-- 注册时间 -->
              <el-table-column
                prop="registerTime"
                label="注册时间"
                align="center"
              >
                <template slot-scope="scope">{{ scope.row.registerTime | fmtDate }}</template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <!-- 序号 -->
        <el-table-column label="序号" type="index" align="center" />
        <!-- 编号 -->
        <el-table-column label="编号" prop="id" align="center" />
        <!-- 评论内容 -->
        <el-table-column prop="comment" label="评论内容" align="center" />
        <!-- 提交时间 过滤时间使用插槽-->
        <el-table-column prop="commentTime" label="提交时间" align="center">
          <template slot-scope="scope">{{ scope.row.commentTime | fmtDate }}</template>
        </el-table-column>
        <!-- 状态 -->
        <el-table-column prop="status" label="状态" align="center">
          <!-- 作用域插槽 -->
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status=='通过'" type="success">{{ scope.row.status }}</el-tag>
            <el-tag v-else-if="scope.row.status=='不通过'" type="danger">{{ scope.row.status }}</el-tag>
            <el-tag v-else-if="scope.row.status=='未审核'" type="info">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <!-- 使用者编号 -->
        <el-table-column prop="userId" label="使用者编号" align="center" />
        <!-- 文章编号 -->
        <el-table-column prop="articleId" label="文章编号" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status=='未审核'" size="mini" type="primary" @click="statusChange(scope.row.id)">通过</el-button>
            <el-button v-if="scope.row.status=='未审核'" size="mini" type="warning" @click="statusBu(scope.row.id)">不通过</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 尾部 -->
    <div id="footer">
      <!-- 分页组件 -->
      <el-pagination align="center" :current-page="currentPage" :page-sizes=" [7,6,3,1]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!-- 添加的对话框 -->
    <el-dialog
      title="添加"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
      @close="dialogClose"
    >
      <!-- 添加的form表单 -->
      <el-form ref="comment_form" :model="commentForm" label-width="100px">
        <el-form-item label="评论内容">
          <el-input v-model="commentForm.comment" />
        </el-form-item>
        <el-form-item label="使用者编号">
          <el-input v-model="commentForm.userId" />
        </el-form-item>
        <el-form-item label="文章编号">
          <el-input v-model="commentForm.articleId" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 引入axios
import { get, post } from '@/utils/request'
export default {
  data() {
    return {
      // 当前的页码
      currentPage: 1,
      // 每页要展示的数据条数
      pageSize: 7,
      // 页面展示数据的总条数
      total: 10,
      tableData: [],
      multipleSelection: [],
      activeNames: 1,
      //
      tableData: [],
      // 获取row的key值
      getRowKeys(row) {
        return row.id
      },
      commentForm: {},
      // 要展开的行，数值的元素是row的key值
      baseUser: '',
      // 模态框
      dialogVisible: false,
      // 表单验证规则
      rules: {
        // 产品名称
        comment: [{ required: true, message: '请输入评论内容', trigger: 'blur' }],
        // 使用者编号
        userId: [
          { required: true, message: '请输入使用者编号', trigger: 'change' }
        ],
        // 文章编号
        articleId: [{ required: true, message: '请输入文章编号', trigger: 'blur' }]
      },
      // 批量多选
      multipleSelection: [],
      delarr: [] // 存放删除的数据
    }
  },
  computed: {},
  created() {
    this.getAllconnent()
  },
  mounted() {},
  methods: {
    // 改变状态 通过
    async statusChange(id) {
      const data = {
        id,
        status: '通过'
      }
      const res = await get('/comment/check', data)
      if (res.status == 200) {
        this.$message({
          message: '通过成功',
          type: 'success'
        })
        // 重新刷新页面的数据
        this.getAllconnent()
        // 调用关闭模态框的方法
        this.dialogClose()
      } else {
        this.$message.error('通过失败')
      }
    },
    // 改变状态 不通过
    async statusBu(id) {
      const data = {
        id,
        status: '不通过'
      }
      const res = await get('/comment/check', data)
      if (res.status == 200) {
        this.$message({
          message: '不通过成功',
          type: 'success'
        })
        // 重新刷新页面的数据
        this.getAllconnent()
        // 调用关闭模态框的方法
        this.dialogClose()
      } else {
        this.$message.error('不通过失败')
      }
    },
    // 删除
    async handleDelete(id) {
      const data = { id }
      const res = await get('/comment/deleteById', data)
      // 给用户一个成功的提示
      if (res.status == 200) {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        // 重新刷新页面的数据
        this.getAllconnent()
        // 调用关闭模态框的方法
        this.dialogClose()
      } else {
        this.$message.error('删除失败')
      }
    },
    // 批量删除
    async moreDelete() {
      const length = this.multipleSelection.length
      for (let i = 0; i < length; i++) {
        console.log(this.multipleSelection[i])
        this.delarr.push(this.multipleSelection[i].id)// 获取id
        console.log(this.delarr[i])
      }
      const res = await post('/comment/batchDelete', { ids: this.delarr })
      if (res.status == 200) {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        // 重新刷新页面的数据
        this.getAllconnent()
      } else {
        this.$message.error('删除失败')
      }
    },
    // 获取所有数据
    async getAllconnent() {
      const data = {
        page: 1,
        pageSize: 10
      }
      const res = await get('/comment/pageQuery', { ...data, ...this.queryData })
      // console.log(res.data.list);
      this.tableData = res.data.list
      // this.baseUser = this.tableData[0].baseUser;
      this.total = res.data.total
      // console.log(this.tableData[0].baseUser)
    },
    // 二级表格
    toggleRowExpansion(row) {
      this.baseUser = []
      this.baseUser.push(row.id)
    },
    // 模态框方法
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 添加弹出模态框
    addTalk() {
      this.commentForm = {}
      this.dialogVisible = true
    },
    // 关闭模态框 调用表单重置的方法
    dialogClose() {
      // 重置表单
      this.$refs['comment_form'].resetFields()
      // 关闭模态框
      setTimeout(() => {
        this.dialogVisible = false
      }, 200)
    },
    submitForm() {
      // 验证提交
      this.$refs['comment_form'].validate(async(valid) => {
        if (valid) {
          // 发送表单验证的请求 提交表单对象
          const res = await post('/comment/saveOrUpdate', this.commentForm)
          // 给用户一个成功的提示
          if (res.status == 200) {
            this.$message({
              message: '提交成功',
              type: 'success'
            })
            // 重新刷新页面的数据
            this.getAllconnent()
            // 调用关闭模态框的方法
            this.dialogClose()
          } else {
            this.$message.error('提交失败')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.currentPage = 1
      this.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    },
    // 操作多选
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>
<style scoped>
/* 设置header的样式 */
.header {
  line-height: 40px;
}
/* 分页区域的样式 */
#footer {
  position: fixed;
  bottom: 40px;
  right: 10px;
}
</style>
